<template>
  <div class="grand_prize">
    <div v-for="prize in prizes" :key="prize.id" class="grand_prize_box">
      <div class="grand_prize_box_top">
        <NuxtImg :src="prize.image" />
        <span>{{ prize.label }}</span>
      </div>
      <div class="grand_prize_box_middle">
        <span>{{ userStore.moneyUnit }} {{ prize.amount }}</span>
      </div>
      <div class="grand_prize_box_bottom">
        <NuxtImg v-for="star in 5" :key="star" :src="assets.star" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const lang: any = getCurrentPageLang("activity/slot");
const userStore = useUserStore();

defineProps(["activeTab"]);

interface PrizeItem {
  id: number;
  label: string;
  amount: string;
  image: string;
}

const assets = {
  star: "/images/activity/slot/star_1.png",
};

const prizes: PrizeItem[] = [
  {
    id: 1,
    label: lang.grand_prize_mini,
    amount: "77",
    image: "/images/activity/slot/img_1.png",
  },
  {
    id: 2,
    label: lang.grand_prize_minor,
    amount: "777",
    image: "/images/activity/slot/img_2.png",
  },
  {
    id: 3,
    label: lang.grand_prize_major,
    amount: "7777",
    image: "/images/activity/slot/img_3.png",
  },
  {
    id: 4,
    label: lang.grand_prize_grand,
    amount: "77777",
    image: "/images/activity/slot/img_4.png",
  },
];
</script>

<style scoped lang="scss">
.grand_prize {
  display: flex;
  justify-content: center;
  gap: 0.08rem;
  padding: 0.24rem;
  background: linear-gradient(
    180deg,
    var(--theme-ts1-gradient1) 0%,
    var(--theme-ts1-gradient2) 100%
  );
  border-radius: 0.3rem;
  color: #fff;

  .grand_prize_box {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;

    .grand_prize_box_top {
      display: flex;
      align-items: center;
      gap: 0.1rem;

      img {
        width: 0.6rem;
      }

      span {
        font-size: 0.34rem;
        font-weight: 800;
      }
    }

    .grand_prize_box_middle {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 0.9rem;
      width: 100%;
      border-radius: 0.2rem;
      border: 0.04rem solid var(--theme-color8);
      background: var(--theme-color9);

      span {
        font-weight: 800;
        font-size: 0.38rem;
        color: var(--theme-dec4);
        white-space: nowrap;
      }
    }

    .grand_prize_box_bottom {
      display: flex;
      gap: 0.04rem;
      margin-top: 0.06rem;

      img {
        width: 0.32rem;
      }
    }
  }
}
</style>
